<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的游记草稿</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/public.js"></script>
    <link href="css/public.css" rel="stylesheet">
    <link href="css/travelogueDraft.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <public @user-loaded="handleUserLoaded" ref="loginComponent">
        <template v-slot:header-ul>
            <ul class="header-ul">
                <li style="width: 60px;">首页</li>
                <li style="width: 74px;">目的地</li>
                <li style="width: 88px;">旅游攻略</li>
                <li style="width: 70px;">去旅行</li>
                <li style="width: 54px">社区</li>
                <li style="width: 74px">找搭子</li>
            </ul>
        </template>
        <template v-slot:nologin>
            <div class="header-login">
                <a href="javascript:void(0)"><img src="images/qq.png" title="QQ登录"/></a>
                <a href="javascript:void(0)"><img src="images/wx.png" title="微信登录"/></a>
                <a class="lar" href="lar.html" style="font-weight: bold;">登录</a>
                <span>|</span>
                <a class="lar" href="lar.html" style="font-weight: bold;">注册</a>
            </div>
        </template>
        <template v-slot:logined="user">
            <div class="header-login">
                <a>打卡</a>
                <a class="msg">消息<i class="bi bi-caret-down-fill"></i></a>
                <a class="per"><img :src="user.avatar"><i class="bi bi-caret-down-fill"></i></a>
            </div>
            <!--消息下拉菜单-->
            <div class="tips msg-tips">
                <ul>
                    <li>私信</li>
                    <li>系统通知</li>
                    <li>回复消息</li>
                </ul>
            </div>
            <!--用户下拉菜单-->
            <div class="tips user-tips">
                <ul>
                    <li><i class="bi bi-pencil-square"></i>写游记</li>
                    <li><i class="bi bi-question-diamond"></i>我的问答</li>
                    <li><i class="bi bi-star-fill"></i>我的收藏</li>
                    <li><i class="bi bi-gear"></i>设置</li>
                    <li @click="loginout"><i class="bi bi-box-arrow-left"></i>退出</li>
                </ul>
            </div>
        </template>
        <template v-slot:container>
            <div v-if=" writeVisible==false " class="container-wrap">
                <h2 class="container-wrap-hd">
                    我的草稿
                    <b>{{draftNum}}</b>
                    <span>
                        【亲爱的{{user.username}}，你还有
                        <b>{{draftNum}}</b>
                        篇草稿没有完成，我们很期待你的大作哦~】
                    </span>
                </h2>
                <div class="draft-list">
                    <ul class="clearfix">
                        <li v-for="(item,index) in travelogueDraft" :key="index">
                            <span class="clearfix-img">
                                <img :src="item.backImg"/>
                            </span>
                            <div class="clearfix-detail">
                                <div class="clearfix-detail-title">
                                    <a v-if="item.title">{{item.title}}</a>
                                    <a v-else>未命名草稿</a>
                                </div>
                                <span class="clearfix-detail-time">{{item.createdTime}}</span>
                                <div class="clearfix-detail-action">
                                    <a @click="continueWrite(item.travelogueId)"
                                       class="clearfix-detail-action-continue">
                                        <i class="bi bi-pencil-square"></i>继续写
                                    </a>
                                    <a @click="deleteDraft(item.travelogueId,index)"
                                       class="clearfix-detail-action-continue">
                                        <i class="bi bi-trash3"></i>删除
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="container-wrap-ft">
                    <a @click="writeVisible=true">
                        <i class="bi bi-x"></i>
                    </a>
                </div>
            </div>
            <div v-else class="write">
                <a @click="toWrite">
                    <img src="images/writeTravelogue.png">
                </a>
                <div class="write-text">
                    所见即所得、工具栏整合、边写边享受
                    <br>
                    全新的游记书写体验
                    <a>「了解详情」</a>
                </div>
            </div>
            <div class="write-bottom">
                <a @click="writeVisible=false">
                    我的草稿箱(
                    <span>{{draftNum}}</span>
                    )
                    <i class="bi bi-card-text"></i>
                </a>
            </div>
        </template>
    </public>

</div>


<script>

    const token = localStorage.getItem('token');
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

    var v = new Vue({
        el: "#app",
        data: {
            user: {},
            draftNum: null,
            travelogueDraft:[],
            writeVisible: false
        },
        mounted() {

        },
        methods: {
            loginout(){
                axios.get("/users/loginout").then(res =>{
                    this.$refs.loginComponent.user = null;
                    this.user = {};
                    location.href = 'index.html'
                })
            },
            handleUserLoaded(user) {
                if (user == null){
                    location.href = 'lar.html';
                    return
                }
                this.user = user;
            },
            deleteDraft(id,index){
                axios.delete("/travelogues/delDraft?travelogueId="+id).then(res =>{
                    if (res.data.code == 200){
                        this.travelogueDraft.splice(index,1);
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        })
                    }
                })
            },
            continueWrite(id){
                window.location.href = 'travelogue.html?travelogueId='+id;
            },
            toWrite(){
                window.location.href = 'travelogue.html';
            }
        },
        watch:{
            user(newValue,oldValue){
                axios.get("/travelogues/getDraft?userId="+newValue.id).then( res =>{
                    if (res.data.code == 200){
                        this.travelogueDraft = res.data.data;
                        this.draftNum = res.data.data.length;
                    }
                })
            }
        }
    })
</script>

</body>
</html>